import React, { useRef, useImperativeHandle, forwardRef } from 'react';
import { Collapse } from 'antd';
import Base from '../../../components/Add/base';
import EnterParams from './enterParam';
import ReturnResult from './returnResult';
import DataBaseSet from './dataBaseSet';
import SqlSet from './sqlSet';

const DefineInterface = forwardRef((props, ref) => {
  const enterParamRef = useRef();

  useImperativeHandle(ref, () => ({
    getDiData: () => ({
      params: enterParamRef.current.getData(),
    }),
  }));

  const renderInterfaceNode = [
    {
      title: '基础配置',
      component: Base,
    },
    {
      title: '数据库设置',
      component: DataBaseSet,
    },
    {
      title: 'SQL配置',
      component: SqlSet,
    },
    {
      title: '入参定义',
      component: EnterParams,
      ref: enterParamRef,
    },
    {
      title: '返回结果',
      component: ReturnResult,
    },
  ];

  return (
    <>
      <Collapse defaultActiveKey={[0, 1, 2, 3, 4]} bordered={false} expandIconPosition='right' ghost={true}>
        {renderInterfaceNode.map((item, index) => (
          <Collapse.Panel header={item.title} key={index}>
            <item.component {...props} ref={item.ref} />
          </Collapse.Panel>
        ))}
      </Collapse>
    </>
  );
});
export default DefineInterface;
